<!--电子围栏页 GeofenceView.vue-->
<template>
 <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
  <span style="line-height:60px;font-size:20px;">分店管理</span>
  <el-button type="primary" style="float:right;margin-top:13px;" @click="router.push('/branchMap')">新建分店</el-button>
 </div>
 <!-- 分店查询卡片 -->
 <el-card style="margin:20px;height: 70px;">
  <el-form :inline="true">
   <el-form-item label="分店名称">
    <el-input v-model="branch_search.name" @keydown="load_branch" placeholder="请输入" style="width:220px;"></el-input>
   </el-form-item>
   <el-form-item label="分店状态" style="width:290px;">
    <el-select v-model="branch_search.status" placeholder="请选择" @change="load_branch">
     <el-option label="启用" value="0"/>
     <el-option label="禁用" value="1"/>
    </el-select>
   </el-form-item>
   <el-form-item>
    <el-button @click="reset_search">重置</el-button>
    <el-button type="primary" @click="load_branch">查询</el-button>
   </el-form-item>
  </el-form>
 </el-card>
 <!-- 分店表格数据 -->
 <el-card style="margin:20px;">
  <!-- stripe:斑马纹/条形纹   -->
  <el-table stripe :data="branch_arr">
   <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
   <el-table-column label="分店名称" prop="name" align="center"></el-table-column>
   <el-table-column label="分店地址" prop="address" align="center" show-overflow-tooltip="true" width="200px"></el-table-column>
   <el-table-column label="分店坐标点"  prop="position" align="center" show-overflow-tooltip="true" width="200"></el-table-column>
   <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
   <el-table-column label="分店状态" align="center">
    <template #default="scope">
     <el-switch @change="change_branch_status(scope.row.id,scope.row.status)" inactive-value="1" active-value="0" v-model="scope.row.status"></el-switch>
    </template>
   </el-table-column>
   <el-table-column label="操作" align="center">
    <template #default="scope">
     <el-button type="primary" link @click="edit_branch(scope.row.id)">修改信息</el-button>
     <el-button type="primary" link @click="delete_branch(scope.row.id)">删除分店</el-button>
    </template>
   </el-table-column>
  </el-table>
 </el-card>
 <!-- 分店信息弹窗 -->
  <el-dialog title="分店信息" v-model="dialog_branch" :before-close="handleClose">
   <el-form label-width="80px" label-position="top">
      <el-form-item label="分店名称">
       <el-input v-model="branch.name"></el-input>
      </el-form-item>
      <el-form-item label="分店地址">
       <el-input v-model="branch.address"></el-input>
      </el-form-item>
      <el-form-item label="坐标信息">
       <el-input readonly v-model="branch.position"></el-input>
      </el-form-item>
    <el-form-item prop="name" label="营业开始时间" >
     <el-time-picker placeholder="请选择" v-model="branch.workTimeStart" value-format="HH:mm:ss"></el-time-picker>
    </el-form-item>
    <el-form-item prop="name" label="营业结束时间">
     <el-time-picker placeholder="请选择" v-model="branch.workTimeEnd" value-format="HH:mm:ss"></el-time-picker>
    </el-form-item>
    <el-form-item prop="name" label="电话">
     <el-input placeholder="请输入电话" v-model="branch.phone"></el-input>
    </el-form-item>
    <el-form-item prop="name" label="分店描述">
     <el-input maxlength="100" show-word-limit type="textarea" placeholder="请输入" v-model="branch.description"></el-input>
    </el-form-item>
      <el-form-item label="分店图片">
       <img :src="BASE_URL+branch.imgUrl" style="width:150px;">
      </el-form-item>
    <el-form-item label="上传图片">
     <el-upload
         v-model:file-list="fileList"
         v-model:action="actionUrl"
         name="file"
         limit="1"
         list-type="picture-card"
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
         :class="{hide:hideUpload}"
     >
      <el-icon>
       <Plus/>
      </el-icon>
     </el-upload>
     <el-dialog v-model="dialog_img">
      <img style="width: 300px" w-full :src="dialogImageUrl"/>
     </el-dialog>
    </el-form-item>
   </el-form>
   <template #footer>
    <el-button @click="handleClose">取消</el-button>
    <el-button @click="submit_edit_branch" type="primary">确定</el-button>
   </template>
  </el-dialog>

</template>

<script setup>

import router from "@/router";
import {onMounted, ref, watch} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const branch_search = ref({name:'',status:''})
const branch_arr = ref([])
const load_branch = ()=>{
 let data = qs.stringify(branch_search.value)
 axios.get(BASE_URL+'/v1/branch/select?'+data)
     .then((response)=>{
      if(response.data.code===2000){
        branch_arr.value=response.data.data
      }else{
       ElMessage.error(response.data.msg)
      }
     })
}
const tablesList = ref([])
onMounted(()=>{
 load_branch()
 //获取餐桌信息
 //getTables(tablesList,104)
})

const reset_search = ()=>{
 branch_search.value={name:'',status:''}
 load_branch()
}

const change_branch_status = (id,status)=>{
 axios.post(BASE_URL+'/v1/branch/updateStatusById/'+id+'/'+status)
     .then((response)=>{
      if(response.data.code===2000){
       ElMessage.success('修改成功')
      }else{
       ElMessage.error(response.data.msg)
      }
     })
}
//分店信息弹窗
const dialog_branch = ref(false)
//分店信息表单
const branch = ref({
 name:'',address:'',position:'',imgUrl:'',phone:'',workTimeStart:'',workTimeEnd:'',description:''
})
//打开分店信息修改弹窗
const edit_branch = (id)=>{
 dialog_branch.value=true
 selectBranchById(id)


}
//根据id查询分店
const selectBranchById =(id)=>{
 axios.get(BASE_URL+'/v1/branch/selectById?id='+id)
 .then((response)=>{
  if(response.data.code===2000){
   branch.value=response.data.data
  }else{
   ElMessage.error('数据加载错误')
  }
 })
}
//关闭分店信息修改弹窗
const handleClose = ()=>{
 if(confirm('确认关闭吗')){
  dialog_branch.value=false
  branch.value={name:'',address:'',position:'',imgUrl:'',phone:'',workTimeStart:'',workTimeEnd:'',description:''}
  //如果上传了图片但没有确认，点了取消按钮，删除
  if(fileList.value.length>0){
   let upload_img_url = fileList.value[0].response.data
   axios.post(BASE_URL+'/v1/file/remove?imgUrl='+upload_img_url)
       .then((response)=>{
        if (response.data.code===2000){
         ElMessage.warning('图片取消保存');
        }
       })
  }
  fileList.value=[]
  dialogImageUrl.value=''
 }
}
//提交分店修改信息
const submit_edit_branch = ()=>{
 //原来的图片地址
 let original_img_url = branch.value.imgUrl
 if(fileList.value.length>0){
  //新上传的图片地址
  branch.value.imgUrl=fileList.value[0].response.data
  //如果原图片存在，删除原来的图片
  if(original_img_url!=null&&original_img_url!==''){
   axios.post(BASE_URL+'/v1/file/remove?imgUrl='+original_img_url)
       .then((response)=>{
        if (response.data.code===2000){
         ElMessage.warning('原图片已删除!');
        }
       })
  }
 }
 console.log(branch.value)
 let data = qs.stringify(branch.value)
 axios.post(BASE_URL+'/v1/branch/save',data)
     .then((response)=>{
      if(response.data.code===2000){
       ElMessage.success('分店信息保存成功')
       dialog_branch.value=false
       branch.value={name:'',address:'',position:'',imgUrl:'',phone:'',workTimeStart:'',workTimeEnd:'',description:''}
       fileList.value=[]
       dialogImageUrl.value=''
      }else{
       ElMessage.error(response.data.msg)
      }
     })
}
const delete_branch = (id)=>{
 if(confirm('确认删除吗')){
  axios.post(BASE_URL+'/v1/branch/deleteById/'+id)
      .then((response)=>{
       if(response.data.code===2000){
        ElMessage.success('删除成功')
        load_branch()
       }else{
        ElMessage.error(response.data.msg)
       }
      })
 }

}
/*图片上传组件开始*/
const fileList = ref([])
const dialogImageUrl=ref('')
const dialog_img=ref(false)
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
 console.log(uploadFile, uploadFiles);
 //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
 let imgUrl = uploadFile.response.data;
 //2.给后端发请求,删除图片
 axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
     .then((response)=>{
      if (response.data.code===2000){
       ElMessage.success('删除成功!');
      }
     })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
 //uploadFile就是刚上传那个图片文件对象
 dialogImageUrl.value = uploadFile.url
 //dialogImageUrl.value = BASE_URL+uploadFile.response.data
 dialog_img.value = true;
 //console.log(fileList.value[0].response.data);//后端响应过来的图片路径  /2024/10/26/310dae46-98d5-4f69-a87f-14a733e30898.png
}
//上传后不显示上传按钮
const hideUpload = ref(false)
watch(() =>fileList.value.length,(newValue,oldValue)=> {
 //console.log('watch',newValue);
 if(newValue===1){
  hideUpload.value=true//隐藏上传按钮
 }else{
  hideUpload.value=false//显示
 }
},{ immediate: false }/*初始化时不触发*/)
/**图片上传相关代码结束**/
</script>

<style>
.hide .el-upload--picture-card {
 display: none;
}
</style>